<template>
	<div class="content">
		<div class="content-top">
			车辆管理_车辆换电记录
		</div>
		<div class="box-card box-shadow">
			<el-form :inline="true" class="demo-form-inline">
				<div>
					<el-form-item style="margin: 10px 28px!important;" label="开始时间">
						 <el-date-picker style="width: 200px;"
						      v-model="start_time"
						      type="datetime"
							  value-format="yyyy-MM-dd HH:mm:ss"
						      placeholder="选择日期时间">
						    </el-date-picker>
					</el-form-item>
					<el-form-item style="margin: 10px 28px!important;" label="结束时间">
						<el-date-picker style="width: 200px;"
						     v-model="stop_time"
						     type="datetime"
							 value-format="yyyy-MM-dd HH:mm:ss"
						     placeholder="选择日期时间">
						   </el-date-picker>
					</el-form-item>
					<el-form-item style="margin: 10px 0px!important;">
						<el-button type="primary" @click='search' icon="el-icon-search">搜索</el-button>
					</el-form-item>
					<el-button @click='close' style="float: right; margin: 10px 20px" type="text"><i class="el-icon-close"></i>关闭</el-button>
				</div>
			</el-form>
		</div>
		<div class="content-table">
			<el-table :data="tableData" show-header stripe style="width: 100%;">
				<el-table-column prop="carLicensePlateNumber" label="车牌号" >
				</el-table-column>
				<el-table-column prop="handOverTime" label="车辆VIN" >
				</el-table-column>
				<el-table-column prop="memberName" label="换电时间" >
				</el-table-column>
				<el-table-column prop="drivingMileage" label="换电量" >
				</el-table-column>
				<el-table-column prop="nowHandOverMileage" label="换电站" >
				</el-table-column>
				<el-table-column prop="handOverTime" label="换电工位" >
				</el-table-column>
				<el-table-column prop="nextMemberName" label="换电前行驶里程" >
				</el-table-column>
				<el-table-column prop="nextMemberName" label="换电前剩余里程数" >
				</el-table-column>
				<el-table-column prop="nextMemberName" label="换电前电池包编码" >
				</el-table-column>
				<el-table-column prop="nextMemberName" label="换电后电池包编码" >
				</el-table-column>
				<el-table-column prop="nextMemberName" label="换电状态" >
				</el-table-column>
			</el-table>
		</div>
		<div class="content-page">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page"
			 :page-size=limit layout="prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
		
		
	</div>
</template>

<script>
	let _this;
	export default {
		props: ['id','vin'],
		data() {
			return {
				tableData: [],
				limit: 10,
				page: 1,
				total: 1,
				start_time: '',
				stop_time: '',
				dict: '',
			}
		},
		created() {
			_this = this;
		},
		mounted() {
			this.get_list();
			this.get_dict();
		},
		methods: {
			search(){
				this.get_list();
			},
			
			get_dict() {
				this.$axios.get(this.$global.serverIp + 'admin/dict/findDict?keyword=vehicle')
					.then(function(res) {
						if (res != '')
							_this.dict = res.data;
					})
			},
			
			get_list() {
				this.$axios.post(this.$global.serverIp + 'vehicle/vehicleswitchrecord/getVehicleSwitchRecord', {
						"vin": this.vin,
						"beginDate": this.start_time,
						"endDate": this.stop_time,
						"page": this.page+"",
						"limit": this.limit+""
					})
					.then(function(res) {
						console.log(res);
						if (res != '') {
							_this.tableData = res.data.list;
							_this.total = res.data.totalCount;
							_this.page = res.data.currPage;

						}

					})
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.page = val;
				this.get_list();
				console.log(`当前页: ${val}`);
			},
			close() {
				clearInterval(window.getGpsInterval);
				this.$emit("close", 0);
			}
		}
	}
</script>

<style>
	.box-shadow {
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
	}

	.box-card {
		margin: 20px;
	}

	.car-card-line {
		margin-top: 20px;
	}
</style>
